<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<jsp:root version="1.2"
      xmlns:jsp="http://java.sun.com/JSP/Page"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
	  xmlns:rich="http://richfaces.org/rich"> 

<html xmlns="http://www.w3.org/1999/xhtml" >
	<ui:composition template="/templates/main.xhtml">
		<ui:param name="bean" value="#{roleBean}" />
		<ui:define name="body">
			<a4j:outputPanel ajaxRendered="true" id="mainOutputPanel">
				<a4j:keepAlive beanName="roleBean" />
				<a4j:form ajaxSubmit="true" id="listForm">
					<rich:dataTable value="#{roleBean.roles}" var="role" 
							width="700" align="center" rows="10" id="roles" reRender="dataScroller"
							style="white-space: nowrap; overflow: auto;cursor:pointer;" sortMode="single"
							onRowMouseOver="this.style.backgroundColor='#BED6F8'"
        					onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'">
        					
       					<a4j:support action="#{roleBean.showDetails}" event="onRowClick">
       						<f:setPropertyActionListener value="#{role}" target="#{roleBean.role}" />
       					</a4j:support>
        
					 	<rich:column sortBy="#{role.name}" style="text-align:left;" >
					 		<f:facet name="header">
								<h:outputText value="#{labels['papel.nome']}" />
							</f:facet>
							<h:outputText value="#{role.name}" width="200"/>
						</rich:column>
						<f:facet name="footer">
               				<rich:datascroller id="dataScroller" />
           				</f:facet>
					</rich:dataTable>
					
					<br />
				
					<a4j:commandButton action="#{roleBean.createRole}" value="#{labels['novo']}" style="margin-left:45px;"/>
				</a4j:form>
				
				<rich:modalPanel autosized="true" showWhenRendered="true" 
					rendered="#{roleBean.createState or roleBean.updateState or roleBean.detailState}">
					<f:facet name="header">
						<h:outputText value="#{roleBean.modalPanelTitle}" />
					</f:facet>
					
					<f:facet name="controls">
			            <h:panelGroup>
			            	<a4j:form id="closeModalForm" ajaxSubmit="true">
				                <h:graphicImage value="/img/modalClose.png" id="hideModal" style="cursor:pointer;">
				                	<a4j:support action="#{roleBean.hideModalPanelForm}" event="onclick"/>
				                </h:graphicImage>
			                </a4j:form>
			            </h:panelGroup>
					</f:facet>
					
					<a4j:form id="modalForm" ajaxSubmit="true">			
						<h:panelGrid columns="2" width="300px;" style="height:100%;">
							<h:outputLabel value="#{labels['papel.nome']}:" for="name"/>
							<h:inputText id="name" value="#{roleBean.name}" rendered="#{roleBean.createState or roleBean.updateState}"/>
							<h:outputText value="#{roleBean.name}" rendered="#{roleBean.detailState}"/>
							
							<h:outputLabel value="#{labels['papel.descricao']}:" for="description" />
							<h:inputTextarea id="description" rows="3" cols="70" value="#{roleBean.description}" rendered="#{roleBean.createState or roleBean.updateState}"/>
							<h:outputText value="#{roleBean.description}" rendered="#{roleBean.detailState}"/>
						</h:panelGrid>
						
						<br />
											
						<a4j:commandButton action="#{roleBean.confirmCreate}" value="#{labels['confirmar']}" rendered="#{roleBean.createState}"/>
						<a4j:commandButton action="#{roleBean.prepareUpdate}" value="#{labels['alterar']}" rendered="#{roleBean.detailState}"/>
						<rich:spacer width="7" rendered="#{roleBean.detailState}"/>
						<a4j:commandButton action="#{roleBean.delete}" value="#{labels['excluir']}" rendered="#{roleBean.detailState}"/>
						<a4j:commandButton action="#{roleBean.confirmUpdate}" value="#{labels['confirmar']}" rendered="#{roleBean.updateState}"/>
					</a4j:form>		
				</rich:modalPanel>
			</a4j:outputPanel>
		</ui:define>
	</ui:composition>
</html>
</jsp:root>